<script setup lang="ts">
import { DeptAPIs, type DeptInfo, type DeptTreeNode } from '@/api/system/dept'
import type { DeptAtrrPublic } from '@/api/system/dict'
import { DictAPIs, EnumDictName } from '@/api/system/dict'
import { ElMessage, ElMessageBox, type FormRules } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'

const deptForm = ref<DeptInfo>({
  deptCode: '',
  deptName: '',
  parentDeptCode: '',
  parentDeptName: '',
  hospitalCode: '',
  clinicAttr: '',
  outpOrInp: '',
  branchCode: '',
  internalOrSergeryDesc: '',
  editStatus: false,
  internalOrSergery: '',
  position: '',
  deptAlias: '',
  inputCode: '',
})
const deptRef = ref<any>()
const treeData = ref<DeptTreeNode[]>([])
const clinicAttrs = ref<DeptAtrrPublic[]>([])
const isAttrs = ref<DeptAtrrPublic[]>([])
const oiAttrs = ref<DeptAtrrPublic[]>([])
// 查询内容
const queryText = ref('')

/** 获取科室树 */
const getDeptTree = async () => {
  treeData.value = await DeptAPIs.getDeptTree()
}

watch(queryText, (val: string) => {
  deptRef.value!.filter(val)
})

/** 过滤节点 */
const filterNode = (value: string, data: DeptTreeNode) => {
  if (!value) {
    return true
  }
  return data.deptName.includes(value)
}

/** 初始化科室树 */
onMounted(async () => {
  // 科室树
  await getDeptTree()

  //
  clinicAttrs.value = await DictAPIs.getData<any>(EnumDictName.科室临床科室属性)

  oiAttrs.value = await DictAPIs.getData<any>(EnumDictName.科室门诊住院科室标志)

  isAttrs.value = await DictAPIs.getData<any>(EnumDictName.科室内外科标志)
})

/** 选择科室 */
const selectDept = async (data: DeptTreeNode) => {
  deptForm.value = await DeptAPIs.getDeptInfo(data.deptCode)
}

/** 科室表单规则 */
const deptRules = reactive<FormRules<typeof deptForm>>({
  deptName: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value === '') {
          callback(new Error('请输入部门名称'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  clinicAttr: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value === '') {
          callback(new Error('请输入新密码'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  outpOrInp: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value === '') {
          callback(new Error('请现次输入确认新密码'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  internalOrSergeryDesc: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value === '') {
          callback(new Error('请现次输入确认新密码'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
})

/** 新增科室 */
const addDept = async () => {
  deptForm.value.editStatus = true
}

/** 新增下级科室 */
const addChildrenDept = async () => {
  deptForm.value.editStatus = true
}

/** 删除科室 */
const deleteDept = async () => {
  ElMessageBox.confirm('确定删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    if (deptForm.value.deptCode !== '' && deptForm.value.deptCode !== undefined && deptForm.value.deptCode !== null) {
      await DeptAPIs.removeDeptInfo(deptForm.value)
      ElMessage.success('删除成功')
      getDeptTree()
    }
    // 新增
    addDept()
  })
}

/** 保存科室*/
const saveDept = async () => {}
</script>

<template>
  <div style="width: 100%; height: 100%">
    <el-splitter vertical style="width: 100%; height: 100%">
      <el-splitter-panel size="260" style="width: 100%; height: 100%">
        <el-input v-model="queryText" />
        <el-tree
          :data="treeData"
          style="width: 100%; height: 100%"
          @filter-node-method="filterNode"
          @node-click="selectDept"
        />
      </el-splitter-panel>
      <el-splitter-panel>
        <div>
          <el-button type="primary" @click="addDept">新增平级</el-button>
          <el-button type="primary" @click="addChildrenDept">新增下级</el-button>
          <el-button type="primary" @click="saveDept">保存</el-button>
          <el-button type="primary" @click="deleteDept">删除</el-button>
        </div>
        <el-form ref="deptRef" v-model="deptForm" :rules="deptRules" style="padding: 10px" label-width="120px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="上级科室代码" prop="parentDeptCode">
                <el-input v-model="deptForm.parentDeptCode" placeholder="请输入上级科室代码" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="上级科室名称" prop="parentDeptName">
                <el-input v-model="deptForm.parentDeptName" placeholder="请输入上级科室名称" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="科室代码" prop="deptCode">
                <el-input v-model="deptForm.deptCode" placeholder="请输入部门代码" :disabled="deptForm.editStatus" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="科室名称" prop="deptName">
                <el-input v-model="deptForm.deptName" placeholder="请输入部门名称" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="科室别名" prop="deptAlias">
                <el-input v-model="deptForm.deptAlias" placeholder="请输入部门名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="临床科室属性" prop="deptAlias">
            <el-radio-group v-model="deptForm.clinicAttr">
              <el-radio v-for="item in clinicAttrs" :key="item.code" :label="item.code">
                {{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="门诊住院标志" prop="outpOrInp">
            <el-radio-group v-model="deptForm.outpOrInp">
              <el-radio v-for="item in oiAttrs" :key="item.code" :label="item.code">
                {{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="内外科标志" prop="internalOrSergery">
            <el-radio-group v-model="deptForm.internalOrSergery">
              <el-radio v-for="item in isAttrs" :key="item.code" :label="item.code">
                {{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="科室位置" prop="position">
            <el-input v-model="deptForm.position" placeholder="请输入科室位置" type="textarea" />
          </el-form-item>
        </el-form>
      </el-splitter-panel>
    </el-splitter>
  </div>
</template>

<style lang="scss" scoped></style>
